<template>
  <div class="teacher">
    <el-row class="teacher-header" type="flex" align="middle">
      <el-row
        type="flex"
        align="middle"
        class="container header-box"
        v-if="!$util.isEmpty(teacherBasic)"
      >
        <edu-avatar :size="140" :src="teacherBasic.avatar_url"></edu-avatar>
        <div class="basic">
          <el-row type="flex" align="middle" class="account">
            <span class="name">{{ teacherBasic.title }}</span>
            <span class="btn copper" v-if="$util.isDef(teacherBasic.level_text)">{{
              teacherBasic.level_text
            }}</span>
          </el-row>
          <el-link
            v-if="teacherBasic.mhm_id != 1"
            class="link"
            :underline="false"
            @click="handleNextScholl()"
            >所属机构：{{ teacherBasic.school_name }}<i class="el-icon-view el-icon-arrow-right"></i
          ></el-link>
        </div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleUserFollow(teacherBasic.user_id)"
            v-if="teacherBasic.is_follow == 0"
            >关注</el-button
          >
          <el-button plain size="mini" @click="handleUserFancelCancel(teacherBasic.user_id)" v-else
            >取消关注</el-button
          >
          <el-button
            type="primary"
            icon="edu-icon-tiwen edu-icon--left"
            size="mini"
            @click="handleQuestion"
            >提问</el-button
          >
        </div>
      </el-row>
    </el-row>
    <el-row class="container">
      <div class="tab-wrapper">
        <el-tabs>
          <el-tab-pane label="介绍">
            <div
              class="content-wrapper"
              v-html="teacherBasic.info"
              v-if="!$util.isEmpty(teacherBasic.info)"
            ></div>
          </el-tab-pane>
          <!-- <el-tab-pane label="动态">动态</el-tab-pane> -->
          <el-tab-pane label="点播">
            <div class="couerse-wrapper">
              <edu-course-list
                v-if="courseDataDainbo.length > 0"
                :courseList="courseDataDainbo"
                imgageHeight="100px"
                @next="handleCourseNext"
              ></edu-course-list>
              <edu-no-data v-else></edu-no-data>
              <edu-pagination @handleCurrentChange="handleCurrentChange(1)"></edu-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="直播">
            <div class="couerse-wrapper">
              <edu-course-list
                v-if="courseDataZhibo.length > 0"
                :courseList="courseDataZhibo"
                imgageHeight="100px"
                @next="handleCourseNext"
              ></edu-course-list>
              <edu-no-data v-else></edu-no-data>
              <edu-pagination @handleCurrentChange="handleCurrentChange(2)"></edu-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="班级">
            <div class="couerse-wrapper">
              <edu-course-list
                v-if="courseDataBanji.length > 0"
                :courseList="courseDataBanji"
                imgageHeight="100px"
                @next="handleCourseNext"
              ></edu-course-list>
              <edu-no-data v-else></edu-no-data>
              <edu-pagination @handleCurrentChange="handleCurrentChange(4)"></edu-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="关注">
            <home-follow
              v-if="followData.length > 0"
              :data="followData"
              @pagination="handleFollowList"
              @cancel="handleUserFancelCancel"
            ></home-follow>
            <edu-no-data :image="false" text="暂时没有关注哦~" v-else></edu-no-data>
          </el-tab-pane>
          <el-tab-pane label="粉丝">
            <home-follow
              v-if="followerData.length > 0"
              :data="followerData"
              @pagination="handleFollowerList"
              @focus="handleUserFollow"
              @cancel="handleUserFancelCancel"
            ></home-follow>
            <edu-no-data :image="false" text="暂时没有粉丝哦~" v-else></edu-no-data>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="side-right">
        <home-course :datas="courseHotList"></home-course>
        <home-visitors :datas="visitorsList"></home-visitors>
      </div>
    </el-row>
  </div>
</template>

<script>
import HomeCourse from './components/homeCourse'
import HomeVisitors from './components/homeVisitors'
import HomeFollow from './components/homeFollow'
import EduCourseList from '@/components/EduCourseList'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
export default {
  components: {
    HomeCourse,
    HomeVisitors,
    HomeFollow,
    EduCourseList,
    EduNoData,
    EduPagination
  },
  inject: ['reload'],
  data() {
    return {
      teacherBasic: {},
      visitorsList: [],
      courseHotList: [],
      userId: 0,
      followData: [],
      followerData: [],
      courseDataDainbo: [],
      courseDataZhibo: [],
      courseDataBanji: [],
      courseDataMainshou: []
    }
  },
  created() {
    this.handleTeacherInit()
  },
  mounted() {
    this.handleGetCourseData(1) // 点播
    this.handleGetCourseData(2) // 直播
    this.handleGetCourseData(3) // 面授
    this.handleGetCourseData(4) // 班级
  },
  methods: {
    // 基础信息
    handleTeacherInit(id) {
      this.$api.getTeacherBasic(this.$route.params.id, res => {
        this.teacherBasic = res.data
        this.userId = res.data.user_id
        this.visitorsList = res.data.recent_visitors
        this.courseHotList = res.data.hot_course
        this.handleFollowList()
        this.handleFollowerList()
      })
    },
    // 列表课程
    handleGetCourseData(type, data) {
      this.$api.getTeacherCourse(
        this.$route.params.id,
        {
          course_type: type,
          page: this.$store.getters['paginate/page'],
          count: 32
        },
        res => {
          if (type == 1) {
            this.courseDataDainbo = res.data.data
          } else if (type == 2) {
            this.courseDataZhibo = res.data.data
          } else if (type == 3) {
            this.courseDataMainshou = res.data.data
          } else if (type == 4) {
            this.courseDataBanji = res.data.data
          }
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: res.data.total
          })
        }
      )
    },
    // 关注列表
    handleFollowList() {
      this.$api.getFollow(
        {
          page: this.$store.getters['paginate/page'],
          count: 32,
          user_id: this.userId
        },
        res => {
          this.followData = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: res.data.total
          })
        }
      )
    },
    // 粉丝列表
    handleFollowerList() {
      this.$api.getFollowFollower(
        {
          page: this.$store.getters['paginate/page'],
          count: 32,
          user_id: this.userId
        },
        res => {
          this.followerData = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: res.data.total
          })
        }
      )
    },
    // 关注别人
    handleUserFollow(id) {
      this.$(() => {
        this.$api.createFollow(
          {
            user_id: id
          },
          res => {
            this.$message.success(res.msg, () => {
              this.reload()
            })
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      })
    },
    // 取消关注
    handleUserFancelCancel(id) {
      this.$(() => {
        this.$api.deleteFollow(
          {
            user_id: id
          },
          res => {
            this.$message.success(res.msg, () => {
              this.reload()
            })
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      })
    },
    // 跳转机构
    handleNextScholl() {
      window.open(`${this.teacherBasic.mhm_sdn}?id=${this.teacherBasic.mhm_id}`, '_blank')
    },
    // 课程跳转
    handleCourseNext(item) {
      this.$router.push({ path: '/course/' + item.id })
    },
    // 课程分页
    handleCurrentChange(type) {
      this.handleGetCourseData(type)
    },
    // 提问
    handleQuestion() {
      this.$(() => {
        this.$messageBox
          .prompt('', {
            title: '提问',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'textarea',
            inputPattern: /\S/,
            inputErrorMessage: '不能为空',
            inputPlaceholder: '请输入提问内容',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: true
          })
          .then(({ value }) => {
            this.$api.createQuestion(
              {
                recive_user_id: this.teacherBasic.user_id,
                content: value
              },
              res => {
                this.$message.success(res.msg)
              },
              error => {
                this.$message.error(error.msg)
              }
            )
          })
          .catch(() => {})
      })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.teacher {
  .content-wrapper {
    padding: 20px 15px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 24px;
    letter-spacing: 1px;
    word-wrap: break-word;
    ::v-deep .image img {
      max-width: 100%;
    }
  }
  .couerse-wrapper {
    padding: 15px 20px 0;
    ::v-deep .course-list .item .picture {
      padding-top: 100px;
    }
  }
  .teacher-header {
    background-image: url('../../assets/images/teacher/teacher_bg.png');
    margin-bottom: 14px;
    height: 220px;
    .header-box {
      .el-avatar {
        border: 4px solid rgba(247, 247, 247, 1);
      }
      .basic {
        flex: 1;
        margin-left: 30px;
        .account {
          margin-bottom: 20px;
          .name {
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            margin-right: 10px;
          }
          .btn {
            font-size: 12px;
            border-width: 1px;
            border-style: solid;
            padding: 2.5px 5px;
            &.gold {
              color: #f54030;
              border-color: #f54030;
            }
            &.silver {
              color: #ff8a52;
              border-color: #ff8a52;
            }
            &.copper {
              color: #fff;
              border-color: #fff;
            }
          }
        }
        ::v-deep .link {
          color: #fff;
        }
      }
    }
  }
  .tab-wrapper {
    width: 820px;
    float: left;
    background-color: #fff;
    ::v-deep .el-tabs__header {
      .el-tabs__nav-scroll {
        padding: 0 15px;
      }
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
      .el-tabs__active-bar {
        opacity: 0;
      }
      .el-tabs__item {
        height: 44px;
        line-height: 44px;
      }
    }
  }
  .side-right {
    margin-left: 15px;
    width: 365px;
    float: left;
  }
}
</style>
